<template>
    <div class="container">
        <van-nav-bar title="实时生产状况" />

        <div class="header-content">
            <van-field :value="fieldValue" is-link readonly label="线名/机器" placeholder="请选择线名/机器" @click="show = true" />
            <van-popup v-model="show" round position="bottom">
                <van-cascader v-model="cascaderValue" title="请选择线名/机器" :options="options" @close="show = false"
                    @finish="onFinish" />
            </van-popup>
        </div>

        <div class="info-container">
            <van-cell title="程式名" :value="formdata.machineName" />
            <van-cell title="机器状态">
                <template v-if="formdata.machineStatus === 1">
                    <img src="../../assets/img/greenStatus.svg" alt="绿色状态" class="status-icon" />
                </template>
                <template v-else-if="formdata.machineStatus === 2">
                    <img src="../../assets/img/yellowStatus.svg" alt="黄色状态" class="status-icon" />
                </template>
                <template v-else-if="formdata.machineStatus === 3">
                    <img src="../../assets/img/redStatus.svg" alt="红色状态" class="status-icon" />
                </template>
            </van-cell>
            <van-cell title="状态描述" :value="formdata.machineStatusDesc" />
        </div>

        <div class="event-log">
            <p>GPX Machine Event：</p>
            <van-cell-group>
                <van-cell v-for="(item, index) in eventLogData" :key="index">
                    <div>
                        <p>时间: {{ item.dateTimeStr }}</p>
                        <p>线体: {{ item.line }}</p>
                        <p>机器: {{ item.machine }}</p>
                        <p>状态: {{ item.state }}</p>
                        <p>描述: {{ item.desc }}</p>
                    </div>
                </van-cell>
            </van-cell-group>
        </div>
    </div>
</template>

<script>
import { getLineMachine, getGPXsingleUtilization, getGPXsingleEventlog } from '@/network/gpx';
import { Notify } from 'vant';
import dayjs from 'dayjs';

export default {
    data() {
        return {
            show: false,
            formdata: {},
            fieldValue: '',  // 显示在 Field 中的线名/机器名
            cascaderValue: '',  // 级联选择的值
            options: [],
            selected: {},  // 存储选中的线名和机器
            eventLogData: []
        };
    },
    mounted() {
        this.getLineMachineData();
    },

    methods: {
        async getLineMachineData() {
            try {
                const result = await getLineMachine();
                if (result && result.status === 200) {
                    this.options = this.formatLineMachineData(result.data);
                } else {
                    Notify({ type: 'danger', message: '获取线体/机器出错' });
                }
            } catch (error) {
                console.error(error);
            }
        },

        onFinish({ selectedOptions }) {
            console.log("selectedOptions", selectedOptions);
            this.cascaderValue = selectedOptions.map(item => item.value).join(' / ');
            this.fieldValue = this.cascaderValue;
            this.show = false;

            const lineName = selectedOptions[0]?.value || '';
            const machineName = selectedOptions[1]?.value || '';

            this.selected = { lineName, machineName };

            console.log('选中的线名:', lineName);
            console.log('选中的机器名:', machineName);

            this.getGPXsingleData();
        },




        async getGPXsingleData() {
            try {
                const res = await getGPXsingleUtilization({
                    lineName: this.selected.lineName,
                    machineName: this.selected.machineName
                });

                if (res.status === 200) {
                    this.formdata = res.data;
                } else {
                    Notify({ type: 'danger', message: '获取数据失败' });
                }
            } catch (error) {
                console.error(error);
            }
        },

        formatLineMachineData(data) {
            return data.map(line => ({
                text: line.lineName,
                value: line.lineName,
                children: line.machines.map(machine => ({
                    text: machine.machineName,
                    value: machine.machineName
                }))
            }));
        }

    }
};
</script>

<style lang="scss" scoped>
.container {
    background: #f5f5f5;
}

.header-content {
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: bold;
}

.info-container {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 16px;
}

.event-log {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
}

.status-icon {
    width: 24px;
    height: 24px;
    margin-left: 8px;
}
</style>
